<template>
    <div class="theme-goods-list-edit">
        <Row :gutter="20">
            <Col span="12">
                <div class="theme-goods-list-edit-card">
                    <Row :gutter="10" style="padding: 0px 0px 10px 0px;">
                        <Col span="5">
                            <Input clearable v-model="searchData.goodsName" placeholder="商品名称" type="text"></Input>
                        </Col>
                        <Col span="5">
                            <Select @on-change="getTypeTwoList" clearable v-model="searchData.goodsTypeIdOne"
                                    placeholder="商品一级分类">
                                <Option v-for="(key,value) in goodsTypeOne" :value="key.catid">{{key.catname}}</Option>
                            </Select>
                        </Col>
                        <Col span="5">
                            <Select @on-change="getTypeThreeList" clearable v-model="searchData.goodsTypeIdTwo"
                                    placeholder="商品二级分类">
                                <Option v-for="(key,value) in goodsTypeTwo" :value="key.catid">{{key.catname}}</Option>
                            </Select>
                        </Col>
                        <Col span="5">
                            <Select clearable v-model="searchData.goodsTypeIdThree" placeholder="商品三级分类">
                                <Option v-for="(key,value) in goodsTypeThree" :value="key.catid">{{key.catname}}
                                </Option>
                            </Select>
                        </Col>
                        <Col span="4">
                            <Button style="float: right" :loading="search_loading" @click="searchGetList"
                                    type="primary">
                                <Icon type="ios-pulse-strong"></Icon>
                                筛 选
                            </Button>
                        </Col>
                    </Row>
                    <Card dis-hover>
                        <p slot="title">
                            <Icon type="ios-list-outline"></Icon>
                            商品列表 <a>(拖起即可添加)</a>
                        </p>
                        <Row :gutter="20" type="flex" align="middle"
                             style="padding:0px 9px 12px;color:rgba(0,0,0,0.4);font-weight: 600">
                            <Col span="5">
                                商品名称
                            </Col>
                            <Col span="5" class="notwrap">
                                商品编号
                            </Col>
                            <Col span="2">
                                图片
                            </Col>
                            <Col span="7" style="text-align: center">
                                商品分类
                            </Col>
                            <Col span="5" style="text-align: center">
                                店铺
                            </Col>
                        </Row>
                        <div style="height: 598px;">
                            <draggable class="list-group" element="ul" v-model="todoArray" :options="dragOptions"
                                       :move="onMove" @end="isCheck">
                                <transition-group type="transition" :name="'flip-list'">
                                    <li class="list-group-item" v-for="(item,value) in todoArray" :key="value+1">
                                        <Row :gutter="20" type="flex" align="middle">
                                            <Col span="5" class="notwrap">
                                                {{item.goodsname}}
                                            </Col>
                                            <Col span="5" class="notwrap">
                                                {{item.goodssn}}
                                            </Col>
                                            <Col span="2">
                                                <img class="goosPic" :src="item.goodsimg"/>
                                            </Col>
                                            <Col span="7" style="text-align: center" class="notwrap">
                                                {{item.catNameLast}}
                                            </Col>
                                            <Col span="5" style="text-align: center" class="notwrap">
                                                {{item.shopname}}
                                            </Col>
                                        </Row>
                                    </li>
                                </transition-group>
                            </draggable>
                        </div>
                    </Card>
                    <!--分页-->
                    <div style="padding: 10px 0px 0px 0px;">
                        <Page :transfer="false" @on-page-size-change="changeTiao" @on-change="changePage"
                              :current="index" :total="total" show-elevator show-sizer :placement="'top'"
                              :page-size="page_con" :page-size-opts="[15, 30, 45, 60, 75]"></Page>
                    </div>
                </div>
            </Col>
            <Col span="12">
                <div class="theme-goods-list-edit-card">
                    <Row :gutter="10" style="padding: 0px 0px 10px 0px;">
                        <Col span="8">
                            <DatePicker :disabled="isTime" :editable="false" clearable v-model="timeStartEnd"
                                        style="width: 100%"
                                        type="daterange" placeholder="时间筛选"></DatePicker>
                        </Col>
                        <Col span="8">
                            <Select :disabled="isTime" v-model="themeType"
                                    placeholder="主题分类">
                                <Option v-for="(key,value) in themeList" :value="key.id">{{key.name}}</Option>
                            </Select>
                        </Col>
                        <Col span="8">
                            <Button style="float: right" @click="resetList"
                                    type="primary">
                                清空
                            </Button>
                        </Col>
                    </Row>
                    <Card dis-hover>
                        <p slot="title">
                            <Icon type="ios-list-outline"></Icon>
                            主题分类 <a>(拖起即可删除)</a>
                        </p>
                        <div style="height: 628px;">
                            <draggable element="span" v-model="doArray" :options="dragOptions" :move="onMovedele" @end="deleList">
                                <transition-group name="no" class="list-group" tag="ul">
                                    <li class="list-group-item" v-for="(item,value) in doArray" :key="value+1">
                                        <Row :gutter="20" type="flex" align="middle">
                                            <Col span="5" class="notwrap">
                                                {{item.goodsname}}
                                            </Col>
                                            <Col span="5" class="notwrap">
                                                {{item.goodssn}}
                                            </Col>
                                            <Col span="2">
                                                <img class="goosPic" :src="item.goodsimg"/>
                                            </Col>
                                            <Col span="7" style="text-align: center" class="notwrap">
                                                {{item.catNameLast}}
                                            </Col>
                                            <Col span="5" style="text-align: center" class="notwrap">
                                                {{item.shopname}}
                                            </Col>
                                        </Row>
                                    </li>
                                </transition-group>
                            </draggable>
                        </div>
                    </Card>
                    <Button type="primary" :loading="sub_loading" class="sub" long size="large"
                            @click="sureSunAddGoods">确 定 添 加
                    </Button>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        name: "theme-goods-list-edit",
        components: {
            draggable
        },
        data() {
            return {
                todoArray: [],//左侧商品列表
                doArray: [],//右侧添加的商品列表
                total: 0,
                index: 1,
                page_con: 15,
                goodsTypeOne: [],//一级分类
                goodsTypeTwo: [],//二级分类
                goodsTypeThree: [],//三级分类
                searchData: {
                    goodsName: "",//商品名称
                    goodsTypeIdOne: "",
                    goodsTypeIdTwo: "",
                    goodsTypeIdThree: "",
                },
                search_loading: false,
                themeList: [],//主题列表
                themeType: "",//主题绑定
                timeStartEnd: [],//时间段绑定
                isTime: false,
                sub_loading: false,
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 0,
                    group: 'description',
                    ghostClass: 'ghost'
                };
            },
        },
        mounted() {
            this.getGoodsList()//获取商品列表
            this.getTypeOneList()//获取一级分类
            this.getTheme()//获取主题列表
        },
        methods: {
            //获取商品列表
            getGoodsList() {
                this.getJsonData("Goods/getGoodsList", {
                    num: this.page_con,
                    page: this.index,
                    goodsName: this.searchData.goodsName,
                    goodsCatId1: this.searchData.goodsTypeIdOne,
                    goodsCatId2: this.searchData.goodsTypeIdTwo,
                    goodsCatId3: this.searchData.goodsTypeIdThree,
                })
                    .then((res) => {
                        this.search_loading = false
                        this.todoArray = res.data
                        this.total = parseInt(res.count)
                    })
            },
            //获取商品一级分类
            getTypeOneList() {
                this.getJsonData("Cat/getOneCat", {})
                    .then((res) => {
                        this.goodsTypeOne = res.data
                    })
            },
            //获取商品二级分类
            getTypeTwoList() {
                if (this.searchData.goodsTypeIdOne != "") {
                    this.getJsonData("Cat/getChildCat", {catId: this.searchData.goodsTypeIdOne})
                        .then((res) => {
                            this.goodsTypeTwo = res.data
                        })
                } else {
                    this.goodsTypeTwo = []
                    this.goodsTypeThree = []
                }
            },
            //获取三级分类
            getTypeThreeList() {
                if (this.searchData.goodsTypeIdTwo != "") {
                    this.getJsonData("Cat/getChildCat", {catId: this.searchData.goodsTypeIdTwo})
                        .then((res) => {
                            this.goodsTypeThree = res.data
                        })
                } else {
                    this.goodsTypeThree = []
                }
            },
            //获取主题列表
            getTheme() {
                this.getJsonData("Zhuti/getAll", {
                    num: 300,
                    page: 1,
                }, true)
                    .then((res) => {
                        this.themeList = res.data
                        this.themeType = res.data[0].id
                    })
            },
            //向右侧添加
            onMove({relatedContext, draggedContext}) {
                return false
            },
            //向左侧删除
            onMovedele({relatedContext, draggedContext}) {
                return false
            },
            //删除右侧列表
            deleList(val){
                this.doArray.splice(val.oldIndex, 1)
            },
            //添加检测
            isCheck(val) {
                //验证
                if(this.timeStartEnd[0]){
                    if((JSON.stringify(this.doArray).indexOf(JSON.stringify(this.todoArray[val.oldIndex])))===-1){
                        this.getJsonData("Zhuti/checkExit", {
                            goodsId: this.todoArray[val.oldIndex].goodsid,
                            zhutiId: this.themeType,
                            btime: this.timeStartEnd[0] ? this.timeStartEnd[0] / 1000 : "",
                            ltime: this.timeStartEnd[1] ? this.timeStartEnd[1] / 1000 : "",
                        })
                            .then((res) => {
                                //可以添加
                                this.isTime = true//禁止时间段选择
                                this.doArray.push(this.todoArray[val.oldIndex])
                            })
                    }else{
                        this.$Message.warning("请勿拖拽重复商品")
                    }
                }else{
                    this.$Message.warning("请选择时间")
                }
            },
            //确定添加商品
            sureSunAddGoods() {
                this.sub_loading = true
                if (this.doArray.length != 0) {
                    this.getJsonData("Zhuti/addGoodsToZhuti", {
                        goodsIds: this.doArray.map((value, item) => {
                            return value.goodsid
                        }).join(","),
                        zhutiId: this.themeType,
                        btime: this.timeStartEnd[0] ? this.timeStartEnd[0] / 1000 : "",
                        ltime: this.timeStartEnd[1] ? this.timeStartEnd[1] / 1000 : "",
                    }, true)
                        .then((res) => {
                            //可以添加
                            this.sub_loading = false
                            this.$Message.success("添加成功")
                            this.resetList()
                        })
                        .catch((res) => {
                            this.sub_loading = false
                        })
                } else {
                    this.$Message.warning("请添加商品")
                    this.sub_loading = false
                }
            },
            //右侧重置列表
            resetList() {
                this.timeStartEnd = [];
                this.isTime = false;
                this.doArray = []
            },
            //筛选
            searchGetList() {
                this.search_loading = true
                this.getGoodsList()
                this.index = 1
            },
            changePage(n) {
                this.index = n
                this.getGoodsList()
            },
            changeTiao(num) {
                this.page_con = num
                this.index = 1
                this.getGoodsList()
            },
        }
    }
</script>

<style lang="less">
    @import "theme-goods-list-edit";
</style>